/**
 *  学习目标：组件生命周期钩子 - 挂载时
 */
import React from 'react'

export default class App extends React.Component {
  // 创建组件时，最先执行
  constructor() {
    // 继承父类的构造函数
    super()
    console.log('constructor钩子被执行了')
    this.state = {
      msg: 'Hello',
    }
  }

  // 开发经验：constructor() 平常比较少用，一般都用简写的方式，创建组件时最先执行
  // state = {
  //   msg: 'Hello',
  // }

  // 每次组件渲染都会触发
  render() {
    console.log('render钩子被执行了')
    return (
      <>
        <h1>知识点标题</h1>
        <h2>{this.state.msg}</h2>
        <button onClick={() => this.setState({ msg: this.state.msg + '!' })}>修改MSG</button>
      </>
    )
  }

  // 组件挂载（完成DOM渲染）后
  // 可通过 cmd 快速生成结构
  componentDidMount() {
    console.log('componentDidMount钩子被执行了')
    console.log(document.querySelector('h2'))
  }
}
